<template>
  <div>
    <div class="mySwiper swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in data" :key="item">
              {{item}}
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import 'swiper/swiper-bundle.min.css'
import Swiper from 'swiper'

export default { 
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      swiper: null
    }
  },
  mounted () {
    this.swiper = new Swiper('.mySwiper', {
      loop: true
    })
  },
  updated () {
     this.swiper = new Swiper('.mySwiper', {
      loop: true
    }) 
    // this.$nextTick(() => {
    //   this.swiper.update()
    // })
  }
}
</script>

<style lang="scss" scoped>

</style>
